<template>
  <div class="double-model-textarea-description-container">
    <div class="input-box">
      <el-input 
        class="double-model-textarea double-model-textarea-description" 
        type="textarea" 
        show-word-limit
        autosize
        resize="none"
        :placeholder="formItem.descriptionPlaceholder || '描述'"
        v-model="formItem.description"
        @focus=" (e) => e.target.classList.add('is-focus')"
        @blur="(e) => e.target.classList.remove('is-focus')"
      ></el-input>
      <el-button class="fiel-upload" type="primary" link @click="uploadFile()">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="添加图片"
          placement="top-start"
        >
          <i class="iconfont">&#xe6e6;</i>
        </el-tooltip>
      </el-button>
    </div>
    <div class="file-box" v-if="formItem.descriptionFile">
      <span class="delete-file" @click="deleteFile">
        <i class="iconfont">&#xe8e7;</i>
      </span>
      <el-scrollbar height="200px">
        <img :src="formItem.descriptionFile" alt="">
      </el-scrollbar>
    </div>
    <ImageUpload v-if="showUpload" v-model:showDialog="showUpload" :isAppendToBody="true" :limit="1" @getImage="getImage"></ImageUpload>
  </div>
</template>
<script setup>
import { ref, defineProps, computed } from 'vue'
const props = defineProps({
  formItem: {
      type: Object,
  },
})
const formItem = computed(()=>{return props.formItem})
const showUpload = ref(false)
// 上传附件
const uploadFile = () => {
  showUpload.value = true
}
const getImage = (images) => {
  formItem.value.descriptionFile = images[0].url
}
const deleteFile = () => {
  formItem.value.descriptionFile = ''
}
</script>
<style scoped lang='scss'>
.double-model-textarea-description-container{
  width: 100%;
  .input-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .fiel-upload{
      margin-left: 10px;
      visibility: hidden;
      margin-bottom: 10px;
      i{
        color: $mainColor;
      }
    }
    &:hover{
      .fiel-upload{
        // display: inline-block;
        visibility: inherit;
      }
    }
  }
  .file-box{
    width: 320px;
    height: 200px;
    margin-bottom: 10px;
    position: relative;
    img{
      width: 100%;
    }
    &:hover{
      .delete-file{
        visibility: inherit;
      }
    }
    .delete-file{
      visibility: hidden;
      position: absolute;
      top: 3px;
      right: 9px;
      color: $mainColor;
      border-radius: 4px;
      overflow: hidden;
      z-index: 1;
      .iconfont{
        background: #F0F1F1;
        padding: 0 8px;
      }
    }
  }
}
// 描述
.double-model-textarea-description{
  margin-bottom: 10px;
  ::v-deep(.el-input__inner){
    font-size: 12px;
  }
}
i {
  padding: 5px;
  &:hover {
    cursor: pointer;
    color: $hoverColor;
    background: #F0F1F1;
    border-radius: 3px;
  }
}
</style>